<template>
  <div id="admin-manage" class="page-wrapper">
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card">
        <el-form class="form" :inline="true" ref="form" :model="formData">
          <!-- <el-form-item label="订单编号" prop="orderId">
            <el-input
              v-model.trim="formData.orderId"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="商品名称" prop="goodsName">
            <el-input
              v-model.trim="formData.goodsName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="电话" prop="userPhone">
            <el-input
              v-model.trim="formData.userPhone"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="选择日期">
            <el-date-picker
              v-model="formData.time"
              type="daterange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>
    <div class="wrapper main-card">
      <el-table
        :data="pageData"
        style="width: 100%"
        :stripe="true"
        @selection-change="handleSelectionChange"
        row-key="id"
      >
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="totalMoney" label="销售总额"></el-table-column>
        <el-table-column prop="refundMoney" label="退单总额"></el-table-column>
        <el-table-column label="营业总额" label-class-name="text-right">
          <template slot-scope="scope">
            {{ scope.row.totalMoney - scope.row.refundMoney }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import GroupSelector from '@/components/GroupSelector'
import { searchrefundorderlist } from '@/api/pcclinet'
import { refundorder, searchsalereport } from '@/api/pcclinet'
export default {
  name: 'RoomInfo',
  components: {
    GroupSelector
  },
  data() {
    return {
      currentPage: 1,
      pageData: [],
      total: '',
      pageSize: 10,

      formData: {
        orderId: '',
        goodsName: '',
        userPhone: '',
        time: []
      },
      modifydata: {},
      tableData: [],
      currentRow: null,
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const date = new Date()
              picker.$emit('pick', [date, date])
            }
          },
          {
            text: '这个月内',
            onClick(picker) {
              const startDate = new Date()
              startDate.setDate(1)
              const endDate = new Date()
              endDate.setMonth(endDate.getMonth() + 1, 0) // 设置到下个月的第一天
              picker.$emit('pick', [startDate, endDate])
            }
          }
        ]
      }
    }
  },

  methods: {
    // Implement pagination methods
    queryByPage() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      return this.tableData.slice(start, end)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageData = this.queryByPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageData = this.queryByPage()
    },
    // Search button click handler
    // 获取销售报表数据的方法
    handleSubmitClick() {
      const { goodsName, time } = this.formData
      const strTime = time.length ? time[0] : ''
      const endTime = time.length ? time[1] : ''

      // 构建传递给 searchsalereport API 的参数
      const params = {
        goodsName, // 用户名
        strTime: strTime, // 开始时间
        endTime: endTime // 结束时间
      }
      console.log(params);
      
      // 调用 searchsalereport API
      searchsalereport(params)
        .then(res => {
          if (res.success) {
            this.tableData = res.data.ordertotal // 设置表格数据
            this.total = res.data.length // 设置总条目数
            this.pageData = this.queryByPage() // 根据当前页码和分页大小更新表格数据
          }
        })
        .catch(err => {
          console.error('获取销售报表数据失败:', err)
        })
    }
  },

  mounted() {
    //   searchsalereport()
    //     .then(res => {
    //       if (res.success) {
    //         console.log('res', res)
    //         this.tableData = res.data.ordertotal // 设置表格数据
    //         this.total = res.data.length // 设置总条目数
    //         this.pageData = this.queryByPage() // 根据当前页码和分页大小更新表格数据
    //       }
    //     })
    //     .catch(err => {
    //       console.error('获取销售报表数据失败:', err)
    //     })
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.selector-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Vertical center alignment */
}

.list-wrapper {
  margin-top: 40px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.form-item-wrapper {
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  /* Adjust margin as needed */
}

.image-preview {
  max-width: 100px;
  /* Adjust as needed */
  max-height: 50px;
  /* Adjust as needed */
}

.button-wrapper {
  margin-top: 20px;
  /* Adjust margin as needed */
  display: flex;
  justify-content: flex-end;
  /* Align to right */
  align-items: center;
  /* Vertical center alignment */
}
</style>
